<template>
    <h4>分类管理</h4>
    <div class="common-layout" style="margin-top: 20px;" >
        <el-container>
            <el-header>
                <el-button @click="dialogFormVisible = true">新增分类</el-button>
                <el-button disabled @click="dialogFormVisible = true">批量删除</el-button>
            </el-header>
            <el-main>
                <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="sortName" label="标签名称" width="180" />
                    <el-table-column prop="creationTime" label="创建时间" width="180" >
                        <template #default="{row}" >
{{ row.creationTime}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="sortDesc" label="备注" width="180" />
                    <el-table-column label="操作" min-width="120">
                        <template #default>
                            <el-button link type="primary" size="small">
                                编辑
                            </el-button>
                            <el-button link type="primary" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-dialog v-model="dialogFormVisible" title="新增标签" width="500">
                    <el-form :model="form" label-width="140">
                        <el-form-item label="分类名称">
                            <el-input v-model="form.sortName" />
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="form.sortDesc" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <div class="dialog-footer">
                            <el-button type="primary" @click="AddSort">确定</el-button>
                            <el-button @click="dialogFormVisible = false">
                                取消
                            </el-button>
                        </div>
                    </template>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { getSort, InsertSort } from '@/api/index'
import { ElMessage } from 'element-plus';
const dialogFormVisible = ref(false)
const tableData = ref([])
const form = reactive({
    sortName:'',
    sortDesc: ''
})
const getlist = () => {
    getSort().then(res => {
        tableData.value = res.data
    })
}
const AddSort = () => {
    InsertSort(form).then(res => {
        if (res.code == 200) {
            ElMessage.success("添加成功")
            dialogFormVisible.value = false
            getlist()
        }
        else {
            ElMessage.error("添加失败")
        }
    })
}
onMounted(() => {
    getlist()
})
</script>